<template>
  <div class="page-container">
    <el-card>
      <template #header>
        <span>系统设置</span>
      </template>

      <el-form :model="settingsForm" label-width="120px" style="max-width: 600px;">
        <el-form-item label="系统名称">
          <el-input v-model="settingsForm.systemName" />
        </el-form-item>
        <el-form-item label="系统Logo">
          <el-input v-model="settingsForm.systemLogo" />
        </el-form-item>
        <el-form-item label="联系邮箱">
          <el-input v-model="settingsForm.email" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="settingsForm.phone" />
        </el-form-item>
        <el-form-item label="系统维护">
          <el-switch v-model="settingsForm.maintenance" />
        </el-form-item>
        <el-form-item label="用户注册">
          <el-switch v-model="settingsForm.allowRegister" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSave">保存设置</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const settingsForm = reactive({
  systemName: '后台管理系统',
  systemLogo: '/logo.png',
  email: 'admin@example.com',
  phone: '400-888-8888',
  maintenance: false,
  allowRegister: true
})

const handleSave = () => {
  ElMessage.success('设置保存成功')
}

const handleReset = () => {
  ElMessage.info('重置设置')
}
</script>

<style scoped>
.page-container {
  width: 100%;
}
</style>
